<template>
    <div class="content-container">
        <el-form :inline="true">
            <el-form-item label="员工姓名">
                <el-input v-model="keyword" placeholder="请输入姓名"/>
            </el-form-item>
            <el-form-item label="时间段查询">
                <el-date-picker v-model="daterange" type="daterange" range-separator="-" start-placeholder="开始时间"
                                end-placeholder="结束时间" value-format="yyyy-MM-dd"/>
            </el-form-item>
            <el-form-item label="分组类型">
                <el-select v-model="groupType">
                    <el-option v-for="gtype in groupTypes" :value="gtype.value" :key="gtype.value" :label="gtype.name"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button icon="el-icon-search" type="primary" @click="queryDatas()">查询</el-button>
                <el-button icon="el-icon-s-data" type="success" @click="histogramDialogVisible = true">柱状图</el-button>
                <el-button icon="el-icon-pie-chart" type="warning" @click="pieDialogVisible = true">饼状图</el-button>
            </el-form-item>
        </el-form>
        <el-table :data="eReportDatas" border stripe>
            <el-table-column prop="groupType" label="分组类型"></el-table-column>
            <el-table-column prop="customerNum" label="潜在客户新增数"></el-table-column>
        </el-table>
        <div class="content-footer">
            <el-pagination
                    layout="sizes,prev,pager,next,total"
                    :total="total"
                    :current-page="currentPage"
                    :page-size="pageSize"
                    :page-sizes="[5, 10, 50, 100]"
                    @current-change="currentChange"
                    @size-change="sizeChange"
            >
            </el-pagination>
        </div>
        <el-dialog title="潜在客户报表-饼状图" :visible="pieDialogVisible" width="65%" :before-close="beforePieClose">
            <ve-pie :data="chartData"></ve-pie>
        </el-dialog>
        <el-dialog title="潜在客户报表-柱状图" :visible="histogramDialogVisible" width="65%" :before-close="beforeHisClose">
            <ve-histogram :data="chartBarData"></ve-histogram>
        </el-dialog>
    </div>
</template>

<script>
    import {getEReportListsApi, getEReportPieListApi, getReportBarApi} from '@/request/api'
    export default {
        name: "CustomerReport",
        data() {
            return {
                keyword: '',
                daterange: '',
                groupTypes: [
                    {name: '员工', value: 'e.name'},
                    {name: '年', value: "DATE_FORMAT(c.input_time, '%Y')"},
                    {name: '月', value: "DATE_FORMAT(c.input_time, '%Y-%m')"},
                    {name: '日', value: "DATE_FORMAT(c.input_time, '%Y-%m-%d')"},
                ],
                groupType: 'e.name',
                eReportDatas: [],
                total: 0,
                currentPage: 1,
                pageSize: 10,
                pieDialogVisible: false,
                histogramDialogVisible: false,
                chartData: {},
                chartBarData: {}
            }
        },
        methods: {
            queryDatas() {
                this.queryEReport()
                this.queryEReportPieData()
            },
            queryEReport() {
                getEReportListsApi({
                    currentPage: this.currentPage,
                    pageSize: this.pageSize,
                    keyword: this.keyword,
                    beginDate: this.daterange ?this.daterange[0] : '',
                    endDate: this.daterange ?this.daterange[1] : '',
                    groupType: this.groupType
                }).then(res => {
                    if (res.success === true) {
                        this.eReportDatas = res.data.pageInfo.list
                        this.total = res.data.pageInfo.total
                    }
                })
            },
            queryEReportPieData() {
                getEReportPieListApi({
                    currentPage: 1,
                    pageSize: 1000,
                    keyword: this.keyword,
                    beginDate: this.daterange ?this.daterange[0] : '',
                    endDate: this.daterange ?this.daterange[1] : '',
                    groupType: this.groupType
                }).then(res => {
                    if (res.success === true) {
                        this.chartData = {
                            columns: ['name', 'value'],
                            rows: res.data.datas
                        }
                        const newData = res.data.datas.map(r => {
                            return {
                                name: r.name,
                                value: r.value,
                                '潜在客户新增数': r.value
                            }

                        })
                        console.log(newData);
                        this.chartBarData = {
                            columns: ['name', '潜在客户新增数'],
                            rows: newData
                        }
                    }
                })
            },
            currentChange(page) {
                this.currentPage = page
                this.queryEReport()
            },
            sizeChange(size) {
                this.pageSize = size
                this.queryEReport()
            },
            beforePieClose() {
                this.pieDialogVisible = false
            },
            beforeHisClose() {
                this.histogramDialogVisible = false
            }
        },
        created() {
            this.queryDatas()
        }
    }
</script>

<style scoped>

</style>